<template>
	<view class="o-input" :style="{width: inputStyle.width}" style="position: relative;">
		<view style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index:5" v-if="muted_type !== 0"></view>
		<!--用于生成@图片 用css隐藏即可   这里的高度设置成富文本内的行高-->
		<div style="position: absolute;bottom: -1000px;left: 0;z-index: -99;" v-if="chat_type == 'group'">
			<canvas canvas-id="at-canvas" :style="{height:`${cHeight}px`}"></canvas>
		</div>

		<view class="container" :style="{...inputStyle, width: '100%'}">
			<!-- 语音键盘切换组件 -->
			<view class="l-prefix">
				<slot name="prefix">
					<view v-if="voice" class="prefix-icon" @click.stop="cutPreIcon">
						<image src="/static/chat/yuyin.svg" style="width: 46rpx;height: 46rpx;"
							v-show="preIconKey === 'voice'" />
						<image src="/static/chat/jianpan.svg" style="width: 46rpx;height: 46rpx;"
							v-show="preIconKey === 'keyboard'" />
					</view>
				</slot>
			</view>
			<!-- 文本输入 -->
			<!-- :style="{paddingBottom:bottomDistance + 'px'}" -->
			<view class="in-box">
				<view style="max-height: 400rpx;overflow-y: scroll;background-color: #1e1f30;width: 100%;display: flex;border-radius: 20rpx;" v-show="muted_type === 0 && preIconKey === 'voice'" >
					<editor id="editor" class="ql-container" @ready="readyHandle"
						@click.stop="editorFocus" @input="inputText"
						@blur="editorBlur" :adjust-position="false"></editor>
				</view>
				<view class="voice-btn" @longtap="longtapEvent" @touchend="endEvent" @touchcancel="endEvent"
					v-show="muted_type === 0 && preIconKey === 'keyboard'" @touchmove="moveEvent">
					<slot name="voice-btn">{{$t("chat.input.holdSpeak")}}</slot>
				</view>
				<view class="ql-container" v-show="muted_type === 1 || muted_type === 2" style="text-align: center;">
					{{muted_type === 1?$t("chat.input.oneMuted"):$t("chat.input.allMuted")}}
				</view>
				<view class="r-icon" @click.stop="showEmoji">
					<slot name="suffix">
						<image src="/static/chat/biaoqing.svg" style="width: 46rpx;height: 46rpx;" />
					</slot>
				</view>
				<!-- 扩展 -->
				<view class="r-icon" @click.stop="showExtendClick" v-show="!inText.text">
					<slot name="suffix">
						<image src="/static/chat/kuozhan.svg" style="width: 46rpx;height: 46rpx;" />
					</slot>
				</view>
				<view class="btn" @click.stop="submit" v-show="inText.text">
					<slot name="r-btn">
						<button class="submit-btn" :class="inText.text || 'no-text-btn'" size="mini"
							type="primary">{{$t("common.sendConfirm")}}</button>
					</slot>
				</view>
			</view>
			<!-- 语音输入 -->
			<!-- <view class="in-box" v-show="preIconKey === 'keyboard'">
				<view class="voice-btn" @longtap="longtapEvent" @touchend="endEvent" @touchcancel="endEvent"
					@touchmove="moveEvent">
					<slot name="voice-btn">{{$t("chat.input.holdSpeak")}}</slot>
				</view>
			</view> -->
		</view>
		<view v-show="showEmojiBox" class="emoji-box" :style="emojiStyle">
			<o-emoji @click="insertEmoji" @diceSend="shaizi"></o-emoji>
		</view>
		<view v-show="showExtend" class="extend-box">
			<view class="extend-box__item" @click="chooseImg">
				<view class="extend-box__item__imgview">
					<image src="/static/chat/xiangce.svg" alt="" mode="widthFix"
						class="extend-box__item__imgview__img" />
				</view>
				<text class="extend-box__item__text">{{$t("chat.input.photoAlbum")}}</text>
			</view>
			<view class="extend-box__item" @click="Paipicture">
				<view class="extend-box__item__imgview">
					<image src="/static/chat/xiangji.svg" alt="" mode="widthFix"
						class="extend-box__item__imgview__img" />
				</view>
				<text class="extend-box__item__text">{{$t("chat.input.takePicture")}}</text>
			</view>
			<view class="extend-box__item" @click="callingCard">
				<view class="extend-box__item__imgview">
					<image src="/static/chat/mingpian.svg" alt="" mode="widthFix"
						class="extend-box__item__imgview__img" />
				</view>
				<text class="extend-box__item__text">{{$t("chat.input.callingCard")}}</text>
			</view>
			<view class="extend-box__item" @click="collect">
				<view class="extend-box__item__imgview">
					<image src="/static/chat/shoucang.svg" alt="" mode="widthFix"
						class="extend-box__item__imgview__img" />
				</view>
				<text class="extend-box__item__text">{{$t("chat.msg.feature.collect")}}</text>
			</view>
			<view class="extend-box__item" @click="hongbao">
				<view class="extend-box__item__imgview">
					<image src="/static/chat/hongbao.svg" alt="" mode="widthFix"
						class="extend-box__item__imgview__img"  style="width: 40rpx;"/>
				</view>
				<text class="extend-box__item__text">{{$t("chat.msg.feature.redPacket")}}</text>
			</view>
			<!-- <view class="extend-box__item" @click="shaizi">
				<view class="extend-box__item__imgview">
					<image src="/static/chat/hongbao.svg" alt="" mode="widthFix"
						class="extend-box__item__imgview__img"  style="width: 40rpx;"/>
				</view>
				<text class="extend-box__item__text">掷色子</text>
			</view> -->
		</view>
		<view v-show="sayVoice" class="o-record-overlay">
			<slot name="record-overlay">
				<view class="close-icon" :class="sayVoiceMove.cancel && 'close-icon-cancel'">
					<u-icon name="close" :color="sayVoiceMove.cancel?'#ffffff':'#909399'"></u-icon>
				</view>
				<view class="voice-icon">
				</view>
				<view class="animate-box" :class="sayVoiceMove.cancel ? 'animate-box-cancel' : ''">
					<span class="start-taste-line">
						<i v-for="index in (sayVoiceMove.cancel ? 5 : 25)" :key="index" :style="{'--i': index + 1}" />
					</span>
				</view>
			</slot>
		</view>
		<view v-if="chat_type == 'group'">
			<u-popup :show="openMember" @close="openMember = false" round="30rpx" bgColor="#121325">
				<view class="popview">
					<view style="display: flex;justify-content: space-between;padding: 20rpx 30rpx;" class="headerview">
						<u-icon name="arrow-down" color="#ffffff" @click="openMember = false"></u-icon>
						<text class="title"> {{$t("chat.input.ChoosePersonRemind")}} </text>
						<u-icon name="arrow-down" color="#121325"></u-icon>
					</view>
					<view class="searchview">
						<u-search height="64rpx" :showAction="false" :clearabled="false" bgColor="#1e1f30"
							:inputStyle="{fontSize:'24rpx'}" :placeholder="$t('commonality.search')"
							@input="searchInput"></u-search>
					</view>
					<view class="prohibitSearch" v-if="getHideMemberText">
						{{$t("group.group_members.memberProtection")}}
					</view>
					<z-paging ref="pagingMember" v-model="dataList" show-loading-more-when-reload :show-default-loading-more-text="false" :fixed="false" height='70vh' @query="queryList">
						<view :key="index" v-for="(item, index) in dataList" @click="atclick(item)">
							<view class="listitem">
								<view class="listitem__left">
									<cl-avatar :src="item.avatar_url" size="100rpx"></cl-avatar>
								</view>
								<view class="listitem__right">
									<view class="listitem__right__top">
										<text
											class="listitem__right__top__nickname">{{item.group_nickname || item.user_nickname}}</text>
										<text v-if="item.role == 'creator'" class="typetag"
											style="background-color: #52AAFF;">{{$t("group.common.creator")}}</text>
										<text class="typetag"
											v-if="item.role == 'manager'">{{$t("group.common.manage")}}</text>
										<text class="typetag"
											v-if="item.user_type && item.user_type > 0 && item.user_type != 6 && item.user_type != 8"
											style="background-color: #02D478;">{{$t("common.friend.authority")}}</text>
									</view>
								</view>
							</view>
						</view>
					</z-paging>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	// import OEditor from './o-editor/o-editor.vue';
	import oEmoji from './o-emoji/o-emoji.vue';
	import record from './utils/record';
	import {
		parseToText,
		parseToHtml
	} from './utils/util';
	import {
		mapState
	} from 'vuex'
	import {
		v4 as uuidv4
	} from 'uuid';
	import messageApi from '@/services/api/msg.js'
	const plug = uni.requireNativePlugin("Html5App-CameraView");
	const IOSXJPluginIOSPhotoModel = uni.requireNativePlugin("IOSXJPlugin-IOSPhotoModel")
	import groupMembersApi from "@/services/api/group_members.js"
	export default {
		components: {
			oEmoji,
		},
		name: "o-input",
		data() {
			return {
				//canvas高度
				cHeight: 15,
				searchval: '',
				dataList: [],
				showEmojiBox: false,
				showExtend: false,
				inText: {},
				preIconKey: "voice",
				sayVoice: false,
				sayVoiceMove: {
					x: 0,
					cancel: false,
				},
				prefixIcon: ['voice', 'keyboard'],
				recordInterval: {
					fun: null,
					time: 0,
					timeout: false,
				},
				bottomDistance: 0,
				openMember: false,
				//@插入位置下标
				cursorIndex: '',
				//CanvasContext对象
				canvasCtx: null,
				//初始化需要带上p标签，如果为空的话后面比对会有bug
				message: '<p></p>',
				is_edit:false,//是否正在编辑
			};
		},
		mounted() {
			console.log(this.memberList);
			if (!this.voice) {
				this.preIconKey = "voice";
			}
			if (!(typeof this.maxRecordLen === 'number')) {
				this.maxRecordLen = 59;
			}
			//页面加载完获取CanvasContext对象
			this.canvasCtx = uni.createCanvasContext('at-canvas')
		},
		methods: {
			shaizi(){
				uni.$u.throttle(this.sendShaizi, 800, true,'diceSend')
			},
			async sendShaizi(){
				try {
					let chat_type = this.chatInfo.chat_type == 'private'?'0':'1'
					let res = await uni.$api.chat.diceRollsSend({
						chat_type: chat_type,
						target_id: this.chatInfo.uuid,
					})
					if (res && res.code == 200) {
						this.$emit('sendDirectsend',{
							msg_type:'d_r',
							content_text:[{
								d_r: {
									msg_dice_roll_id: res.data.msg_dice_roll_id, //id
									winning_points: res.data.winning_points, //点数
									chat_type: chat_type,
								}
							}]
						})
					}
				} catch (e) {
				}
			},
			async sendMsg(data) {
				try {
					let wy_id = uuidv4();
					let resmsg = await messageApi.directsend({
						target_id: this.chatInfo.uuid,
						local_id: wy_id,
						msg_type: 'r_p',
						content_text: [{
							r_p: {
								red_packet_id: data.id, //红包id
								amount: data.amount, //红包总金额
								remark: this.remark || '恭喜发财，大吉大利',
								chat_type: data.chat_type, //红包(0:私聊;1群聊)
								amount_type: data.amount_type, //0普通红包;1手气红包
								target_id: data.target_id,
								sender_id: data.sender_id,
								quantity: data.quantity, //红包总数量
								per_user_limit: data.per_user_limit, //每人可抢次数
								expiration_time: data.expiration_time, //红包过期时间
							}
						}]
					}, this.chatInfo.chat_type);
					if (resmsg) {
						uni.showToast({
							title: '已发送',
							icon: 'none',
						})
						setTimeout(() => {
							this.$Router.back()
						}, 1000)
					}
				} catch (e) {
					console.log(e);
				}
				uni.hideLoading()
			},
			searchInput(e) {
				uni.$u.debounce(()=>{
					this.searchval = e
					this.$refs.pagingMember.reload()
				}, 500,false)
			},
			async queryList(pageNo, pageSize) {
				try{
					let memberRes = await groupMembersApi.getMemberListPage({
						group_id:this.chatInfo.uuid,
						page:pageNo,
						limit:pageSize,
						nick_name:this.searchval
					})
					if (memberRes) {
						this.$refs.pagingMember.complete(memberRes.list)
					} else {
						this.$refs.pagingMember.complete(false)
					}
				}catch(e){
					//TODO handle the exception
				}
			},
			chooseImg() {
				// return
				// getUDID
				IOSXJPluginIOSPhotoModel.goCamera(null,({
					data
				}) => {
					console.log(data);
					this.$emit('cameracall', data)
				})
				return
				this.$Router.push({
					name: 'chumimage'
				});
			},
			Paipicture() {
				IOSXJPluginIOSPhotoModel.open(null, ({
					data
				}) => {
					console.log(data);
					this.$emit('cameracall', data)
				})
			},
			collect() {
				this.$Router.push({
					name: 'collect',
					params: {
						type: 'chat',
					}
				});
			},
			hongbao(){
				this.$emit('redPack')
			},
			callingCard() {
				this.$Router.push({
					name: 'business_share',
					params: {
						type: 'card',
					}
				});
			},
			hidedKeyboard() {
				if (this.showEmojiBox) {
					this.showEmojiBox = false
				}
				if (this.showExtend) {
					this.showExtend = false
				}
			},
			showEmoji() {
				setTimeout(() => {
					this.showEmojiBox = !this.showEmojiBox;
					if (this.showEmojiBox) {
						this.showExtend = false
						this.preIconKey = 'voice'
					}
				}, 100)
			},
			showExtendClick() {
				setTimeout(() => {
					this.showExtend = !this.showExtend;
					if (this.showExtend) {
						this.showEmojiBox = false
					}
				}, 100)
			},
			insertEmoji(emoji) {
				this.$emit("clickEmoji", emoji);
				
				//新版插入表情，不会弹出输入框，但是不能获取光标位置插入
				let html = this.message
				let img =
					`<img src="${emoji.src}" width="${this.eSize}" height="${this.eSize}" class="emoji" data-custom="emojiName=${emoji.regName}">`
				//把图片替换掉@字符
				let splicelength = 4
				if (html.endsWith('<br></p>')) {
				  splicelength = 8
				}
				html = html.substr(0, html.length - splicelength) + img + html.substr(html.length - splicelength, html.length)
				//塞进富文本内
				this.editorCtx.setContents({
					html: html
				})
				
				
				// this.showEmojiBox = false;

				// this.editorCtx.insertImage({
				// 	src: emoji.src,
				// 	width: this.eSize,
				// 	height: this.eSize,
				// 	extClass: 'emoji',
				// 	data: {
				// 		emojiName: emoji.regName
				// 	}
				// })
				
				
				//更新message内容
				this.editorCtx.getContents({
					success: ({
						html
					}) => {
						this.message = html
						console.log(html);
						let inText = parseToText(html);
						this.inText = inText;
					}
				})
			},
			submit() {
				if (!this.inText?.text) return;
				this.inText.text = this.inText.text.replace(/<span class="ql-cursor">﻿<\/span>/g, '');
				let detail = {
					...this.inText
				};
				detail.html = parseToHtml(detail.text);
				this.$emit("change", detail);
				this.message ='<p></p>'
				this.editorCtx.clear();
			},
			async inputText(e) {
				console.log(e);
				// const regex = /\{(.+?)\}/g; // 匹配 {...} 格式的文本
				// const text = e.detail.html;
				// let html = '';
				// let lastIndex = 0;
				// let match;
				// while ((match = regex.exec(text)) !== null) {
				// 	const atText = match[1]; // 获取 {...} 中的文本，例如 '张三:122222'
				// 	let parts = atText.split(':');
				// 	let res = await this.createATImg(parts[0])
				// 	let imgHtml = `<img src="${res.src}" width="${res.width}px" height="${res.height}px" data-custom="atId=${parts[1]}&atName=${parts[0]}">`
				// 	// 拼接替换前的文本和生成的图片HTML
				// 	html += text.substring(lastIndex, match.index) + imgHtml;
				// 	lastIndex = regex.lastIndex;
				// }
				// if(text){
				// 	html += text.substring(lastIndex);
				// }
				// this.editorCtx.setContents({html: html})
				if (this.chat_type == 'group') {
					if(e.detail.html == "<p><br></p>"){
						e.detail.html = "<p></p>"
					}
					this.checkForMention(e.detail)
				}
				//更新message内容
				this.editorCtx.getContents({
					success: ({
						html
					}) => {
						let inText = parseToText(html);
						this.inText = inText;
						this.$emit("input", this.inText.text)
					}
				})
			},
			async setInput(msg){
				let html = parseToHtml(msg);
				html = await this.parseCustomTags(html)
				
				this.editorCtx.setContents({
					html: `<p>${html}</p>`
				})
				this.editorCtx.getContents({
					success: ({
						html
					}) => {
						this.message = html
						let inText = parseToText(html);
						this.inText = inText;
					}
				})
				this.is_edit = true
			},
			async handleCustomTag(name, identifier) {
			    // 在这里可以添加其他异步操作
			    console.log(`处理用户: ${name}, 标识: ${identifier}`);
			    let res = await this.createATImg(name)
			    // 返回替换字符串
			    return `<img src='${res.src}' class="atExtclass" height="${res.height}" width="${res.width}" data-custom="atId=${identifier}&atName=${name}"/>`;
			},
			async parseCustomTags(html) {
			    // 使用 Promise.all 来处理异步替换
			    const matches = [...html.matchAll(/\{(.*?):(.*?)\}/g)];
			    
			    for (const match of matches) {
			        const replacement = await this.handleCustomTag(match[1], match[2]);
			        html = html.replace(match[0], replacement);
			    }
			
			    return html;
			},
			checkForMention(detail) {
				let str = detail.html
				if (!str) return
				//旧字符串数组
				const oldArr = this.message.split('');
				const newArr = str.split('');
				//找出当前输入的内容
				//如果this.message初始值为空
				//第一次输入@时oldArr将会是空数组，而str为<p>@</p>
				//最终contentStr的值为<p>@</p>，不会进入下一个判断

				let contentStr = str;
				oldArr.forEach(str => {
					contentStr = contentStr.replace(str, '');
				})
				// 输入是@时
				if (contentStr === '@') {
					//打开@选择用户弹窗
					//...
					// 比对算法,找出当前光标的位置,找到当前输入的位置
					newArr.some((now, index) => {
						if (str.substring(0, index) !== this.message.substring(0, index)) {
							this.cursorIndex = index;
							this.editorCtx.blur()
							this.openMember = true
							return true;
						}
					})
				}
				this.message = detail.html
			},
			async atclick(item) {
				console.log(item);
				let html = this.message
				let name = item.group_nickname || item.user_nickname
				let res = await this.createATImg(name)
				//生成图片，返回图片路径
				let img =
					`<img src="${res.src}" width="${res.width}px" height="${res.height}px" class="atExtclass" data-custom="atId=${item.user_id}&atName=${name}">`
				//把图片替换掉@字符
				html = html.substr(0, this.cursorIndex - 1) + img + html.substr(this.cursorIndex, html.length)
				//塞进富文本内
				this.editorCtx.setContents({
					html: html
				})
				//更新message内容
				this.editorCtx.getContents({
					success: ({
						html
					}) => {
						this.message = html
						let inText = parseToText(html);
						this.inText = inText;
					}
				})
				this.openMember = false
			},
			async atlong(item) {
				if (this.muted_type === 0) {
					this.preIconKey = 'voice'
					let name = item.group_nickname || item.user_nickname
					let res = await this.createATImg(name)
					this.editorCtx.insertImage({
						src: res.src,
						width: res.width,
						height: res.height,
						extClass: 'atExtclass',
						data: {
							atId: item.sender_id,
							atName: name
						}
					})
					//更新message内容
					this.editorCtx.getContents({
						success: ({
							html
						}) => {
							this.message = html
							let inText = parseToText(html);
							this.inText = inText;
						}
					})
				}
			},
			//创建@用户文本的图片
			createATImg(name) {
				return new Promise(resolve => {
					//设置字体大小
					this.canvasCtx.setFontSize(14)
					//设置文本水平居中
					this.canvasCtx.setTextAlign('center')
					this.canvasCtx.setFillStyle('#004f8c')
					//设置文本垂直居中
					this.canvasCtx.setTextBaseline('top')
					//获取at文本宽度
					let at = this.canvasCtx.measureText(` @${name} `)
					//填充文本
					this.canvasCtx.fillText(` @${name} `, at.width / 2, 0)
					this.canvasCtx.draw(false, () => {
						//canvas转图片
						uni.canvasToTempFilePath({
							width: at.width,
							canvasId: 'at-canvas',
							success: async (res) => {
								//返回图片链接 图片显示宽度，高度
								resolve({
									src: res.tempFilePath,
									width: at.width,
									height: this.cHeight
								})
							},
							fail: (err) => {
								console.log(err)
							}
						})
					})
				})
			},

			editorFocus(e) {
				if (this.showEmojiBox) {
					this.showEmojiBox = false
				}
				if (this.showExtend) {
					this.showExtend = false
				}
			},
			editorBlur(e) {
				// console.log(e);
			},
			cutPreIcon() {
				let key = this.prefixIcon.filter(val => val != this.preIconKey);
				this.preIconKey = key[0];
				if (this.preIconKey == 'keyboard') {
					this.showEmojiBox = false;
					if (this.showExtend) {
						this.showExtend = false
					}
				}
				this.$emit("cut-mode", key);
			},
			async longtapEvent(e) {
				this.sayVoiceMove.x = e.touches[0].pageY;
				this.sayVoice = true;
				record.start();
				this.recordInterval.fun = setInterval(() => {
					if (this.recordInterval.time >= this.maxRecordLen) {
						clearInterval(this.recordInterval.fun);
						this.endEvent();
						this.recordInterval.timeout = true;
					}
					this.recordInterval.time++;
				}, 1000);
			},
			moveEvent(e) {
				console.log('----',e);
				if (this.sayVoiceMove.x - e.touches[0].pageY > this.offsetY) {
					this.sayVoiceMove.cancel = true;
				} else {
					this.sayVoiceMove.cancel = false;
				}
			},
			async endEvent() {
				console.log('----songkai');
				if (this.recordInterval.timeout) {
					this.recordInterval.timeout = false;
					return;
				}
				console.log('----songkai2');
				record.stop();
				clearInterval(this.recordInterval.fun);
				console.log('----songkai3',record);
				try{
					let result = await record.onStop();
					console.log('----songkai4');
					// let savedFilePath = await this.saveFile(result.tempFilePath);
					if (!this.sayVoiceMove.cancel && this.recordInterval.time < this.minRecordLen) {
						uni.showToast({
							title: this.$t("tost.title.voiceDurationShort"),
							icon: 'none',
							duration: 1000
						});
					} else if (!this.sayVoiceMove.cancel) {
						try {
							console.log('----songkai5');
							let savedFilePath = await this.saveFile(result.tempFilePath);
							console.log('----songkai6');
							this.$emit("record", {
								cancel: this.sayVoiceMove.cancel,
								duration: this.recordInterval.time,
								result: savedFilePath
							});
						} catch (e) {
							console.log(e);
						}
					}
				}catch(e){
					console.log(e);
					//TODO handle the exception
				}
				console.log('----songkai7');
				this.sayVoice = false;
				this.sayVoiceMove.cancel = false;
				this.recordInterval.time = 0;
			},
			saveFile(tempFilePath) {
				return new Promise((resolve, reject) => {
					uni.saveFile({
						tempFilePath,
						success: (res) => {
							resolve(res.savedFilePath);
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},

			readyHandle(editor) {
				// this.editorCtx = editor;
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},

		},
		props: {
			chat_type: {
				type: String,
				default: "private"
			},
			width: {
				type: String,
				default: "750rpx"
			},
			muted_type: {
				type: Number,
				default: 0, //0不禁言1禁言2全员禁言
			},
			height: {
				type: String,
				default: "30"
			},
			emojiSize: {
				type: String,
				default: "15"
			},
			fontSize: {
				type: Number,
				default: 14
			},
			placeholder: {
				type: String,
				default: ''
			},
			emojiStyle: {
				type: Object,
				default: () => {
					return {}
				}
			},
			resize: {
				type: Boolean,
				default: false,
			},
			voice: {
				type: Boolean,
				default: true,
			},
			maxRecordLen: {
				type: Number,
				default: 59
			},
			minRecordLen: {
				type: Number,
				default: 1
			},
			offsetY: {
				type: Number,
				default: 40,
				require: true
			}
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo,
				groupInfo: state => state.chat.chatGroupInfo,
			}),
			inputStyle() {
				let regx = /[a-zA-Z%]/;
				let style = {
					width: this.width,
					// height: this.height,
					fontSize: this.fontSize + 'px',
					minHeight: this.height,
					lineHeight: this.height
				}
				if (!regx.test(this.width)) {
					style.width = this.width + 'px';
				}
				if (!regx.test(this.height)) {
					// style.height = this.height + 'px';
					style.minHeight = this.height + 'px';
					style.lineHeight = this.height + 'px';
				}
				return style;
			},
			eSize() {
				let regx = /[a-zA-Z%]/;
				if (!regx.test(this.emojiSize)) {
					return this.emojiSize + 'px';
				}
				return this.emojiSize
			},
			getList(){
				let members = JSON.parse(JSON.stringify(this.memberList))
				let newdata = members.filter(item => {
					// 根据名字筛选
					if (this.searchval && item.group_nickname.indexOf(this.searchval) === -1 && item.user_nickname.indexOf(this.searchval) === -1) {
						return false;
					}
					return true;
				});
				return newdata
			},
			getHideMemberText(){
				// show_member_list是否显示群成员
				//这里的逻辑是  是否隐藏群成员
				if(this.groupInfo && this.groupInfo['show_member_list'] == '0' && this.groupInfo.userRole == 'member'){
					return true
				}
				return false
			}
		},
	};
</script>

<style lang='scss' scoped>
	
	.typetag {
		white-space: nowrap;
		font-size: 20rpx;
		color: #FFFFFF;
		padding: 0 10rpx;
		height: 28rpx;
		line-height: 28rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-left: 10rpx;
		background-color: #FF7676;
	}

	.suggestions {
		background-color: #ffffff;
		border: 1px solid #cccccc;
		position: absolute;
		z-index: 10;
	}

	.suggestions view {
		padding: 10rpx;
		cursor: pointer;
	}

	.suggestions view:hover {
		background-color: #eeeeee;
	}
	.prohibitSearch{
		margin: 20rpx 30rpx;
		height: 66rpx;
		line-height: 66rpx;
		background: #60A7FF;
		border-radius: 34rpx;
		opacity: 0.5;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.o-input {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		background-color: #0c0d1a;
		padding: 20rpx 30rpx;
		box-sizing: border-box;

		.container {
			display: flex;
			align-items: center;

			.l-prefix {
				height: 100%;

				.prefix-icon {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}
			}

			.in-box {
				flex: 1;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				max-height: inherit;

				.ql-container {
					flex: 1;
					width: 0;
					font-size: inherit;
					display: block;
					height: inherit;
					min-height: inherit;
					padding: 20rpx 20rpx;
					border-radius: 20rpx;
					outline: none;
					line-height: 1.2;
					/* ::v-deep p {
						display: flex;
						align-items: center;
						height: inherit;
					} */
				}

				.r-icon {
					display: flex;
					align-items: center;
					margin: 0 0 0 20rpx;
				}

				.btn {
					height: inherit;
					padding: 5rpx;
					margin-left: 20rpx;

					.submit-btn {
						height: 100%;
						width: 45px;
						font-size: 10px;
						border-radius: 8rpx;
						border: none;
						padding: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						color: white;

						&::after {
							border: none;
						}

						&:active {
							background-color: green;
						}
					}

					.no-text-btn {
						background-color: rgb(228, 228, 228);
						background-color: red;
						color: black;

						&:active {
							background-color: rgb(228, 228, 228);
							background-color: red;
						}
					}
				}

				// 语音输入框
				.voice-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;
					height: 74rpx;
					background: #1E1F30;
					border-radius: 20rpx;

					&:active {
						/* background-color: #97ec6a; */
						/* background-color: rgb(177, 174, 195); */
						background-color: #2e304b;
						color: white;
					}
				}
			}
		}

		.emoji-box {
			width: 100%;
		}

		.extend-box {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			padding: 40rpx 30rpx;
			gap: 50rpx;
			min-height: 350rpx;

			&__item {
				display: flex;
				flex-direction: column;
				align-items: center;

				&__imgview {
					width: 90rpx;
					height: 90rpx;
					background: #1E1F30;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					&__img {
						width: 50rpx;
					}
				}

				&__text {
					font-size: 24rpx;
					color: #595A66;
					margin-top: 10rpx;
				}
			}
		}

		.o-record-overlay {
			height: 100vh;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;
			background-color: rgba($color: #474747, $alpha: .95);

			.close-icon {
				transition: all .5s;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 220rpx;
				left: 325rpx;
				width: 100rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				border-radius: 50%;
				background-color: #393939;
				color: #9c9c9c;

				i {
					font-style: normal;
					font-size: 20px;
					transform: rotate(-20deg);
				}
			}

			.close-icon-cancel {
				/* background-color: white; */
				background-color: #fb5353;
				color: black;
				transform: scale(1.3);

				&::before {
					content: "松开 取消";
					color: #a0a0a0;
					position: absolute;
					top: -35px;
					left: -15px;
					font-size: 8px;
					width: 80px;
					border-radius: 0;
				}
			}

			.voice-icon {
				display: flex;
				justify-content: center;
				width: 180%;
				height: 60%;
				position: absolute;
				bottom: -50%;
				left: -40%;
				border-radius: 50%;
				background-color: #3a3a3a;

				.d-icon {
					margin-top: 25px;
					font-size: 20px;
					color: #aaa;
				}
			}

			.animate-box {
				transition: all .3s;
				position: absolute;
				bottom: 40%;
				left: 50%;
				width: 120px;
				height: 60px;
				padding: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 15px;
				transform: translateX(-50%);
				background-color: #97ec6a;

				.start-taste-line {
					display: flex;

					i {
						background-color: black; //声波颜色
						width: 1px;
						height: 4px;
						margin: 0 1px;
						display: block;
						border: none;
						animation: note 0.2s ease-in-out;
						animation-iteration-count: infinite;
						animation-direction: alternate;
						animation-delay: calc(-0.1s * var(--i));

						@keyframes note {
							from {
								transform: scaleY(1);
							}

							to {
								transform: scaleY(4);
							}
						}
					}
				}

				&::after {
					content: "";
					width: 15px;
					height: 15px;
					position: absolute;
					bottom: -5px;
					background-color: inherit;
					transform: rotate(45deg);
				}
			}

			.animate-box-cancel {
				box-sizing: border-box;
				width: 80px;
				left: 50%;
				transform: translateX(-50%);
				bottom: 210px;
				background-color: #fb5353;

				&::after {
					background-color: #fb5353;
				}
			}
		}
	}

	.popview {
		.headerview {
			display: flex;
			align-items: center;
			justify-content: space-between;
			adding: 20rpx 30rpx;

			.title {
				font-size: 28rpx;
			}
		}

		.searchview {
			margin: 20rpx 30rpx;
			background-color: #1e1f30;
			border-radius: 60rpx;
			padding-right: 20rpx;
		}

		.listitem {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;

			&.active {
				background-color: #1E1F30;
			}

			&__right {
				margin-left: 20rpx;
				flex: 1;

				&__top {
					display: flex;
					align-items: center;

					&__nickname {
						color: #fff;
						font-size: 28rpx;
					}
				}

				&__content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 15rpx;

					&__msg {
						flex: 1;
						font-size: 24rpx;
						color: #595A66;
					}
				}
			}
		}
	}
</style>